import { Button, Keyboard, StyleSheet, Text, TextInput, View } from 'react-native'
import React, { useState } from 'react'

export default function addToDo(props: { submitHandler: Function }) {
  const [text, setText] = useState<string>('')

  const changeHandler = (val: string) => {
    setText(val)
  }

  return (
    <View>
      <TextInput style={styles.input} value={text} placeholder='添加任务...' onChangeText={(val) => changeHandler(val)} />
      <Button onPress={() => {
        props.submitHandler(text)
        setText('')
        Keyboard.dismiss()
      }}
        title='添加任务'
        color='coral'
      />
    </View>
  )
}

const styles = StyleSheet.create({
  input: {
    marginBottom: 10,
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderBottomWidth: 1,
    borderBottomColor: '#DDDDDD'
  }
})